<template>
  <div>
    <div class="identity-card" v-debounce="{ fn: jump }">
      <i :class="iClass"></i>
      <p>{{ choice }}</p>
    </div>
    <div v-if="isMask">
      <teleport to="#app">
        <div class="mask" v-show="isShow">
          <div class="choose-box">
            <p class="title">部门负责人您好，选择您所属的部门：</p>
            <div class="card-box">
              <DepartmentCard
                v-for="item in departments"
                :key="item.id"
                :value="item.id"
                :info="item.name"
                :id="item.id"
                name="department"
              ></DepartmentCard>
            </div>
            <div class="button-box">
              <Button
                info="取消"
                class="cancel"
                width="100px"
                backColor="white"
                color="#8a8888"
                :event="
                  () => {
                    isShow = false;
                  }
                "
              ></Button>
            </div>
          </div>
        </div>
      </teleport>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
// import { userRequest } from "../api/UserRequest";
import DepartmentCard from "../components/DepartmentCard.vue";
import Button from "../components/Button.vue";

let props = defineProps({
  // 图标字体类名
  iClass: {
    type: String,
    requied: true,
  },
  // 文字描述
  choice: {
    type: String,
    requied: true,
  },
  // 跳转路径
  name: {
    type: String,
    requied: true,
  },
  // 是否需要遮罩层
  isMask: {
    type: Boolean,
    default: false,
  },
  // 社团id
  id: {
    type: Number,
  },
  // 社团下的部门行列，用于渲染部门选项
  departments: {
    type: Array,
  },
});

const router = useRouter();
// const route = useRoute();

// 遮罩层是否打开
let isShow = ref(false);

// 跳转页面
function jump(): void {
  if (props.isMask) {
    isShow.value = true;
  } else {
    router.push({
      name: "AEnrollment",
    });
  }
}
</script>

<style lang="scss">
$colors: (
  "t-blue": #21618d,
  //常用颜色--蓝
    "t-grey": #8a8888,
  //字体常用颜色--灰
    "t-white": #f5f5f5,
  //字体常用颜色--白
    "border": #707070 //边框颜色,,,,,,,,,,,
);

.identity-card {
  width: 392px;
  height: 392px;
  border-radius: 50px;
  border: 1px solid map-get($map: $colors, $key: border);
  box-shadow: 3px 3px 6px map-get($map: $colors, $key: border);
  background-color: white;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  i {
    font-size: 260px;
    color: map-get($map: $colors, $key: border);
  }
  p {
    font-size: 35px;
    color: map-get($map: $colors, $key: t-grey);
  }
}
.mask {
  .choose-box {
    width: 1200px;
    height: 600px;
    background-color: #f5f5f5;
    border: 1px solid #707070;
    box-shadow: 5px 5px 10px #707070;
    margin-top: 127px;
    margin-left: 25%;
    .title {
      font-size: 39px;
      color: #8a8888;
      padding: 20px 0;
      text-align: center;
    }
    .card-box {
      margin: 0 auto;
      width: 900px;
      height: 400px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
    }
    .button-box {
      padding: 30px;
      display: flex;
      justify-content: end;
    }
  }
}
</style>